<template>
  <div class="treebox">
    <el-input
      v-if="needFilter"
      v-model="filterText"
      size="small"
      class="filter-input"
      placeholder="输入关键字"
    />
    <!-- :default-expanded-keys="defaultExpandedKeys"
    :current-node-key="currentNodeKey"-->
    <el-tree
      ref="treeRef"
      class="resource-tree"
      :data="treeData"
      :accordion="accordion"
      :highlight-current="highlightCurrent"
      :props="defaultProps"
      :node-key="nodeKey"
      :filter-node-method="filterNode"
      :expand-on-click-node="expandOnClickNode"
      v-bind="$attrs"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <slot v-if="custom" :data="{ node, data }"></slot>
          <div v-else>
            <i v-if="showIcon" :class="[iconClass({ node, data })]"></i>
            {{ node.label }}
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, ref, watch } from 'vue'
const props = defineProps({
  treeData: {
    type: Array,
    required: true,
  },
  accordion: {
    type: Boolean,
    default: true,
  },
  highlightCurrent: {
    type: Boolean,
    default: true,
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        children: 'children',
        label: 'name',
      }
    },
  },
  nodeKey: {
    type: String,
    default: 'id',
  },
  showIcon: {
    type: Boolean,
    default: true,
  },
  childrenField: {
    type: String,
    default: 'children',
  },
  custom: {
    type: Boolean,
    default: false,
  },
  needFilter: {
    type: Boolean,
    default: false,
  },
  expandOnClickNode: {
    type: Boolean,
    default: false,
  },
  // defaultExpandedKeys: {
  //   type: Array,
  //   default: () => []
  // },
  // currentNodeKey: {
  //   type: [String, Number],
  //   default: ''
  // }
})

const emits = defineEmits(['click'])

const iconClass = computed(() => {
  return function ({ data, node }: any) {
    if ('fileFlag' in data) {
      if (!data.fileFlag) {
        // 文件夹
        if (node.expanded) {
          return 'el-icon-folder-opened'
        }
        return 'el-icon-folder'
      }
      return 'el-icon-document'
    }
    if (data[props.childrenField] && data[props.childrenField].length > 0) {
      // 文件夹
      if (node.expanded) {
        return 'el-icon-folder-opened'
      }
      return 'el-icon-folder'
    }
    return 'el-icon-document'
  }
})

const filterText = ref('')
const treeRef = ref()
watch(
  () => filterText.value,
  (val: string) => {
    treeRef.value.filter(val)
  }
)

const filterNode = (value: string, data: any) => {
  if (!value) {
    return true
  }
  return data.label.indexOf(value) !== -1
}

const handleNodeClick = (data: any) => {
  emits('click', data)
}
</script>

<style lang="scss">
// @import "@/styles/mixins.scss";

.treebox {
  display: flex;
  height: 100%;
  padding-right: 3px;
  flex-direction: column;

  .filter-input {
    // width: 200px;
    margin: 15px 0;
  }

  .el-tree {
    overflow: auto;
    flex: 1;
    @include scroll-bar;
  }
}

.resource-tree {
  width: fit-content;
  min-width: 100%;
  // padding: 12px 3px 10px;
  padding-right: 3px;
  font-size: 14px;
  background: transparent;
  border-radius: 6px;

  .custom-tree-node {
    flex: 1;
  }

  .el-tree-node {
    color: var(--color-base);
    transition: color 0.3s;

    &.is-focusable {
      & > .el-tree-node__content {
        background: inherit;
      }
    }

    &.is-current {
      & > .el-tree-node__content {
        color: white;
        background: var(--color-primary);

        .el-tree-node__expand-icon {
          color: white;

          &.is-leaf {
            color: transparent;
          }
        }
      }
    }

    .el-tree-node__expand-icon {
      &.is-leaf {
        color: transparent;
      }
    }

    &__content {
      height: 36px;
      border-radius: 4px;

      .el-tree-node__expand-icon {
        color: var(--color-base);

        &.is-leaf {
          color: transparent;
        }
      }

      &:hover {
        color: var(--color-base);
      }
    }
  }
}
</style>
